<template>
  <img class="video_img" :src="videoImg" alt="" v-if="videoImg">
  <video v-else @loadeddata="loadeddata" muted poster="../assets/images/black.png" ref="vcp-video"
    :src="src"></video>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { useRouter } from "vue-router";
import { showToast } from "vant";
const router = useRouter();
const store = useStore();
const videoImg = ref('')
const props = defineProps({
  src: {
    type: String,
    default: '',
  },
})
const loadeddata = (value) => {

}
function getVideoBase64(url) {
  return new Promise(function (resolve, reject) {
    //resolve是一个函数 将异步代码成功的结果传入即可
    //reject也是一个函数 是用来传入异步代码失败的自定义结果
    let dataURL = ""
    //创建vide标签 为获取视频第一帧作为缩略图做准备
    let video = document.createElement("video")
    video.muted = !video.muted;
    video.setAttribute("src", url)
    video.setAttribute("crossOrigin", "anonymous")//处理跨域
    video.setAttribute("autoplay", "true")
    video.addEventListener("loadeddata", function (value) {
      //创建画布 画布可以做到截取视频的第一帧绘制画布上
      let canvas = document.createElement("canvas")
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height)//绘制
      dataURL = canvas.toDataURL("image/jpeg")//转换成base64
      video.pause()
      //将拿到的dataURL地址传入这个resolve函数 很重要 通过这个resolve函数，实例出来的对象调用then方法可以拿到这个resolve的结果
      resolve(dataURL)//这resolve函数是用来传入异步代码成功的结果的
    })
  })
}
onMounted(async () => {
  videoImg.value = await getVideoBase64(props.src)
})
const goToPage = (value) => {
  router.push({
    name: value,
  });
};
</script>
<style lang="scss" scoped>
.preview-video_box {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.video_controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  fill: currentColor;
  color: #fff;
  opacity: 0.8;
}
</style>